import { Drawer as BaseDrawer, DrawerProps as BaseDrawerProps } from '@mantine/core';
import { useUpdateEffect } from 'ahooks';
import { mergeClassNames } from '../tools';

export type DrawerProps = BaseDrawerProps & {
  onOpen?: () => void;
};
export const Drawer: React.FC<DrawerProps> = ({ onOpen, ...props }) => {
  useUpdateEffect(() => {
    if (props.opened) {
      onOpen?.();
    }
  }, [props.opened]);

  return (
    <BaseDrawer
      withCloseButton={false}
      trapFocus={false}
      closeOnEscape={false}
      {...props}
      classNames={mergeClassNames(
        {
          overlay: 'bg-black/60',
          inner: 'w-[375px]',
          content: 'bg-bgc-0',
          body: 'p-0',
        },
        props.classNames,
      )}
    />
  );
};
